<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>我的界面</title>
    <link th:href="@{/img/web_icon.png}" rel="icon" type="image/x-icon">
    <!-- 自定义字体 -->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- 表格界面的主要css -->
    <link th:href="@{/css/sb-admin-2.css}" rel="stylesheet">

    <!-- 表格bootstrap -->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet">

<!--    <link rel="shortcut icon" th:href="@{/mo-favicon.ico}" type="image/x-icon">-->
<!--    <link rel="stylesheet" th:href="@{/css/plugins/font-awesome-4.7.0/css/font-awesome.min.css}"  media="all">-->
    <link rel="stylesheet" th:href="@{/lib/layui-v2.3.0/css/layui.css}"  media="all">
    <link rel="stylesheet" th:href="@{/css/main.css}"  media="all">
    <style>
        hr{
            height: 1px;!important;
            opacity: 30%;!important;
        }
    </style>
</head>

<body id="page-top">

    <!-- Page Wrapper -->
    <div id="wrapper">
        <!-- 侧边栏 -->
        <div id="profileSideBar"
             th:replace="/common/module.html::sideBar(active='myPage')"></div>
        <!-- 侧边栏到此为止啦 -->



        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- 除去侧边栏后剩余的主体部分 -->
            <div id="content">

<!--                更换成模块-->
                <!-- 顶部头条内容 -->
                <div th:replace="/common/module.html::navBar"></div>
                <!-- 顶栏到此为止 -->

                <!-- 主体部分 -->
                <div class="container-fluid">

                    <!-- 头部消息提示 -->
<!--                    <h1 class="h3 mb-2 text-gray-800"></h1>-->

                    <!-- DataTales Example -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">我的基本信息</h6>
                        </div>
                        <div class="card-body col-6">
                            <div class="table-responsive">

                                <div class="card">
                                    <div class="card-body row">

                                        <div class="col-4 layui-form timo-compile user-info-page">
                                            <div class="user-info" style="height: 275px;">
                                                <div class="user-avatar-box">
                                                    <img class="user-avatar" th:src="@{'/system/user/picture?p='+${user.picture}}" alt="头像">
                                                    <span data-toggle="modal" data-target="#avatarModal" class="edit-avatar"
                                                          th:attr="data-url=@{/userPicture}">
                                                        修改头像
                                                    </span>
                                                </div>
                                                <ul class="detail-info">
                                                    <li>账号：<span th:text="${user.username}" th:title="${user.username}"></span></li>
                                                    <li>邮箱：<span th:text="${user.email}" th:title="${user.email}"></span></li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="myInfo col-8">
                                            <form id="user_form" class="user p-2" action="/system/user/updateMyself" method="post">
                                                <div class="form-group col-10">
                                                    <input type="hidden" name="id" th:if="${user}" th:value="${user.id}">
                                                    <input type="hidden" name="dept" th:value="${user.dept.id}">
                                                    <div class="text-gray-800 mt-2">
                                                        <div class="text-gray-800"><span class="fa fa-user-circle mr-1"></span>我的用户名:</div>
                                                        <input type="text" class="form-control form-control-sm" name="username"
                                                               id="myName" th:value="${user.username}" disabled="disabled">
                                                    </div>
                                                    <div class="text-gray-800 mt-2">
                                                        <div class="text-gray-800"><span class="fa fa-envelope mr-1"></span>我的邮箱:</div>
                                                        <input type="email" class="form-control form-control-sm" name="email"
                                                               id="myEmail" th:value="${user.email}" disabled="disabled">
                                                    </div>
                                                    <div class="text-gray-800 mt-2">
                                                        <div class="text-gray-800"><span class="fa fa-pen mr-1"></span>我的笔名:</div>
                                                        <input type="text" class="form-control form-control-sm" name="nickname"
                                                               id="myNickname" th:value="${user.nickname}">
                                                    </div>
                                                    <div class="text-gray-800 mt-2">
                                                        <div class="text-gray-800"><span class="fa fa-money-bill mr-1"></span>稿费支付预留联系方式:</div>
                                                        <textarea type="payAddress" class="form-control form-control-sm" rows="3" cols="50" name="payAddress"
                                                                  id="myPayAddress" th:text="${user.payAddress}"></textarea>
                                                    </div>

                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <button class="btn btn-outline-primary float-right" form="user_form" type="submit">修改我的信息</button>
<!--                                        <button class="btn btn-outline-info" disabled="disabled">保存</button>-->
                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>

                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- 主体内容结束 -->

            <!-- 页脚 -->
            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright &copy; Manage Website 2021</span>
                    </div>
                </div>
            </footer>
            <!-- 页脚-->

        </div>
        <!-- 网页界面结束 -->

    </div>
    <!-- 主体可视界面结束，接下来时其他按钮或者弹窗 -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <!-- 弹窗 -->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">注意</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">确定要退出登录吗?</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <a class="btn btn-primary" href="/logout">确定</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 弹窗 -->
    <div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="avatarModalLabel">裁切头像</h5>
                    <button id="closeAvatarSettingBtn" class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body" style="width: 465px;">
                    <div class="layui-form timo-compile user-info-page" style="height:400px;width: 400px;">
                        <!-- 编辑头像面板 -->
                        <div class="canvas-panel">
                            <img class="canvas-bg"/>
                            <div class="canvas-shade"></div>
                            <canvas class="canvas-crop"></canvas>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="canvas-group layui-btn-group">
                        <button class="upload-close layui-btn layui-btn-primary layui-btn-sm">取消</button>
                        <button class="upload-btn layui-btn layui-btn-primary layui-btn-sm">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript-->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

    <!-- Core plugin JavaScript-->
    <script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>

    <!-- Custom scripts for all pages-->
    <script th:src="@{/js/sb-admin-2.js}"></script>

    <!-- Page level plugins -->
    <script th:src="@{/vendor/datatables/jquery.dataTables.min.js}"></script>
    <script th:src="@{/vendor/datatables/dataTables.bootstrap4.min.js}"></script>

    <!-- Page level custom scripts -->
    <script th:src="@{/js/demo/datatables-demo.js}"></script>
    <script th:src="@{/js/getInformation.js}"></script>

    <script th:replace="/common/template :: script"></script>
<!--    <script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>-->
    <script type="text/javascript" th:src="@{/js/plugins/jquery.mousewheel.min.js}"></script>
    <script>
        layui.use(['jquery','upload'], function () {
            var $ = layui.jquery;
            var upload = layui.upload;

            $(".user-edit").on("mousedown", function () {
                $(this).css("opacity", 1);
            });

            /* 修改头像 */
            var image = new Image();
            var panel = $(".canvas-panel");
            var bgImg = $(".canvas-bg");
            var canvas = $(".canvas-crop");

            // 激活或停止移动
            var moveEvent = false;
            var screenX = 0, screenY = 0;
            var moveTop = 0, moveLeft = 0;
            panel.on("mousedown",function (e) {
                screenX = e.screenX;
                screenY = e.screenY;
                moveTop = parseFloat(bgImg.css("top"));
                moveLeft = parseFloat(bgImg.css("left"));
                moveEvent = true;
            });
            panel.on("mouseup",function (e) {
                moveEvent = false;
            });
            panel.on("mousemove", function (e) {
                if (moveEvent){
                    bgImg.css("left", moveLeft + e.screenX - screenX);
                    bgImg.css("top", moveTop + e.screenY - screenY);
                    renderPanel();
                }
            });
            panel.on("mousewheel", function(event, delta) {
                var dir = delta > 0 ? 'Up' : 'Down';
                var width = parseFloat(bgImg.css("width"));
                var height = parseFloat(bgImg.css("height"));
                if (dir == 'Up') {
                    delta = 1;
                } else {
                    delta = -1;
                }
                bgImg.css("width", width * (1 + 0.1 * delta));
                bgImg.css("height", height * (1 + 0.1 * delta));
                bgImg.css("left", parseFloat(bgImg.css("left")) - (width * 0.1 / 2) * delta);
                bgImg.css("top", parseFloat(bgImg.css("top")) - (height * 0.1 / 2) * delta);
                renderPanel();
                return false;
            });

            // 渲染画布面板
            function renderPanel() {
                canvas[0].width = 256;
                canvas[0].height = 256;
                var imgScale = image.width / bgImg.width();
                var context = canvas[0].getContext('2d');
                var sx = (bgImg.width() * imgScale / 2 ) - canvas.width() / 2 * imgScale,
                    sy = (bgImg.height() * imgScale / 2) - canvas.height() / 2 * imgScale,
                    sw = canvas.width() * imgScale, sh = canvas.height() * imgScale;
                var moveX = panel.width() / 2 - parseFloat(bgImg.css("left")) - bgImg.width() / 2;
                var moveY = panel.height() / 2 - parseFloat(bgImg.css("top")) - bgImg.height() / 2;
                context.drawImage(image, sx + moveX * imgScale, sy + moveY * imgScale, sw, sh, 0, 0, canvas[0].width, canvas[0].height);
            }

            var files = [];
            var uploadInst = upload.render({
                elem: '.edit-avatar'
                ,field: 'picture'
                ,url: $('.edit-avatar').data('url')
                ,exts: 'jpg|png|gif|jpeg'
                ,auto: false
                ,bindAction: ".upload-btn"
                // 选择文件回调
                ,choose: function(obj){
                    obj.preview(function(index, file, result){
                        panel.show();
                        $(".canvas-group").show();
                        image.src = result;
                        image.onload = function(){
                            bgImg.attr("src", result);
                            if(bgImg.width() >= bgImg.height()){
                                bgImg.css("height", canvas.width());
                            }else {
                                bgImg.css("width", canvas.height());
                            }
                            bgImg.css("top", (panel.height() - bgImg.height()) / 2);
                            bgImg.css("left", (panel.width() - bgImg.width()) / 2);
                            renderPanel();
                        }
                    });
                }
                ,before: function(obj){
                    files = obj.pushFile();
                    var index, file;
                    for(index in files) {
                        file = files[index];
                    }
                    var dataurl = canvas[0].toDataURL(file.type, 0.92);
                    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                    while(n--){
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    files[index] = new File([u8arr], file.name, {type:mime});
                }
                ,done: function(res, index){
                    if(res.code == 200){
                        panel.hide();
                        $(".canvas-group").hide();
                        layer.msg("修改头像成功", {offset: '15px', time: 3000, icon: 1});
                        $(".user-avatar").attr("src", canvas[0].toDataURL());
                        //隐藏弹出窗口
                        $('#closeAvatarSettingBtn').click();
                        delete files[index];
                    }else {
                        layer.msg(res.msg, {offset: '15px', time: 3000, icon: 2});
                    }
                }
            });

            // 关闭裁切面板及清空文件
            $(".upload-close").on("click", function () {
                panel.hide();
                $(".canvas-group").hide();
                //隐藏弹出窗口
                $('#closeAvatarSettingBtn').click();
            });
        });
    </script>
</body>

</html>